<template>
  <div>
    <el-alert title="点击考试标题即可对进入已设置开启摄像头的考试" type="success">
    </el-alert>
    <data-table ref="pagingTable" :options="options" :list-query="listQuery" @multi-actions="handleMultiAction">

      <template #filter-content>

        <el-input v-model="listQuery.params.userName" style="width: 200px" placeholder="搜索考试ID" class="filter-item" />
        <el-input v-model="listQuery.params.realName" style="width: 200px" placeholder="搜索考试名称" class="filter-item" />

      </template>

      <template #data-columns>

        <el-table-column type="selection" width="55" />

        <el-table-column align="center" label="考试名称" prop="examTitle">
          <template v-slot="scope">
            <router-link v-if="scope.row.openCamera" :to="{ name: 'SysDepart', params: { examId: scope.row.id } }">
              <span class="title">{{ scope.row.examTitle }}</span>
            </router-link>
            <span v-else>{{ scope.row.examTitle }}</span>
          </template>

        </el-table-column>

        <el-table-column align="center" label="创建时间" prop="createTime" />

        <el-table-column align="center" label="状态" prop="state">
          <template v-slot="scope">
            <el-tag :type="state(scope.row.state)">{{ scope.row.state | examStateFilter }}</el-tag>
          </template>

        </el-table-column>

        <el-table-column align="center" label="是否启用摄像头" prop="openCamera">
          <template v-slot="scope">
            {{ scope.row.openCamera ? "启用" : "未启用" }}
          </template>
        </el-table-column>


      </template>
    </data-table>
  </div>
</template>

<script>
import DataTable from '@/components/DataTable'

export default {
  name: 'SysUserList',
  components: { DataTable },
  filters: {

    userState(value) {
      const map = {
        '0': '正常',
        '1': '禁用'
      }
      return map[value]
    }
  },
  data() {
    return {
      examData: {},

      listQuery: {

        params: {
          currentPage: 1,
          size: 10,
          id: this.$store.state.user.userId
        }
      },

      options: {
        // 列表请求URL
        listUrl: '/exam/getExamIsOpenCamera',
        // 启用禁用
        stateUrl: '/sys/user/state',
        deleteUrl: '/exam/api/sys/user/delete',
        // 批量操作列表
        multiActions: [
          {
            value: 'enable',
            label: '启用'
          }, {
            value: 'disable',
            label: '禁用'
          },
          {
            value: 'delete',
            label: '删除'
          }
        ]
      }
    }
  },

  created() {
  },

  methods: {

    state(state) {
      let type = "primary"
      switch (state) {
        case 0:
          type = "success"
          break;
        case 1:
          type = "info"
          break;
        case 2:
          type = "warning"
          break;
        case 3:
          type = "danger"
          break;
      }

      return type
    },

    // 批量操作监听
    handleMultiAction(obj) {
      if (obj.opt === 'cancel') {
        this.handleCancelOrder(obj.ids)
      }
    }
  }
}
</script>
<style scoped>
.title:hover {
  color: #409EFF;
  text-decoration-line: underline;
}
</style>
